<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增用户')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: datetimepicker-js" />
</head>
<body>
<div class="main-content">
    <form id="form-user-add" class="form-horizontal">
        <input name="deptId" type="hidden" id="treeId"/>
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">项目名称：</label>
                    <div class="col-sm-9">
                        <input type="text" name="project_name" id="project_name" class="form-control" placeholder="请输入文本">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">开始时间：</label>
                    <div class="col-sm-9">
                        <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span>

                            <input type="text" name="project_start" id="project_start" class="form-control" value="2020-09-05">
                        </div>
                    </div>
                    <label class="col-sm-3 control-label">结束时间：</label>
                    <div class="col-sm-9">
                        <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span>

                            <input type="text" class="form-control" name="project_end" id="project_end" value="2020-09-05">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">简介：</label>
                    <div class="col-sm-9">
                        <input type="text" name="project_info" id="project_info" class="form-control" placeholder="请输入文本">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">文件：</label>
                    <div class="col-sm-9 ">
                        <input id="filePath" name="file" type="file" multiple class="file-upload form-control " />
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label">类别：</label>
                    <div class="col-sm-9">
                        <label class="radio-box">
                            <div>
                                <input type="radio" checked="" value="2" id="project_type1" name="project_type" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>

                            </div>软装</label>
                        <label class="radio-box">
                            <div>
                                <input type="radio" value="1" id="project_type2" name="project_type" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>

                            </div>硬装</label>
                    </div>
                </div>


            </div>
        </div>
    </form>
</div>


<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-select-js" />
<th:block th:include="include :: summernote-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />

<script type="text/javascript">
    $("#project_start").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
    $("#project_end").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });


</script>

<script>
    var prefix = ctx + "system/user";
    var file="";
    var fileName="";
    var url="";

    $("#datetimepicker-startTime").datetimepicker();
    $("#datetimepicker-endTime").datetimepicker();

    $("#form-user-add").validate({
        onkeyup: false,
        rules:{
            loginName:{
                minlength: 2,
                maxlength: 20,
                remote: {
                    url: prefix + "/checkLoginNameUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "loginName": function() {
                            return $.common.trim($("#loginName").val());
                        }
                    },
                    dataFilter: function(data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
            password:{
                minlength: 5,
                maxlength: 20
            },
            email:{
                email:true,
                remote: {
                    url: prefix + "/checkEmailUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "email": function () {
                            return $.common.trim($("#email").val());
                        }
                    },
                    dataFilter: function (data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
            phonenumber:{
                isPhone:true,
                remote: {
                    url: prefix + "/checkPhoneUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "phonenumber": function () {
                            return $.common.trim($("#phonenumber").val());
                        }
                    },
                    dataFilter: function (data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
        },
        messages: {
            "loginName": {
                remote: "用户已经存在"
            },
            "email": {
                remote: "Email已经存在"
            },
            "phonenumber":{
                remote: "手机号码已经存在"
            }
        },
        focusCleanup: true
    });

    function uploadFile() {
        var formData = new FormData();
        if ($('#filePath')[0].files[0] == null) {
            return false;
        }
        project_file = $('#filePath')[0].files[0].name;
        formData.append('fileName', $("#filePath").val());
        formData.append('file', $('#filePath')[0].files[0]);
        $.ajax({
            url: ctx + "common/upload",
            type: 'post',
            cache: false,
            data: formData,
            async: false,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function(result) {
                /* $.operate.successCallback(result);*/
                fileName = result.fileName;
                url = result.url;
                if(result){
                    parent.$.modal.msgSuccess(result.msg);
                }
            }
        });
    }




    function submitHandler() {
        if ($.validate.form()) {
            uploadFile();
            var project_name = $("input[name='project_name']").val();
            var project_start = $("input[name='project_start']").val();
            var project_end = $("input[name='project_end']").val();
            var project_info = $("input[name='project_info']").val();
            var project_type = $("input:radio[name='project_type']:checked").val();
            file=$("input[name='file']").val();

            $.ajax({
                cache : true,
                type : "POST",
                url : ctx + "knowledgemanagement/knowledgeBenchmarking/add",
                data : {
                    "project_name": project_name,
                    "project_start": project_start,
                    "project_end": project_end,
                    "project_info": project_info,
                    "project_file":file,
                    "project_type": project_type,
                    "fileName":fileName,
                    "url":url
                },
                async    : false,
                error : function(request) {
                    $.modal.alertError("系统错误");
                },
                success : function(data) {
                    $.operate.successCallback(data);
                }
            })




        }
    }



























    /*用户管理-新增-选择部门树*/
    function selectDeptTree() {
        var treeId = $("#treeId").val();
        var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
        var url = ctx + "system/dept/selectDeptTree/" + deptId;
        var options = {
            title: '选择部门',
            width: "380",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero){
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        if ($.tree.notAllowParents(tree)) {
            var body = layer.getChildFrame('body', index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
        }
    }

    $(function() {
        $('#post').select2({
            placeholder: "请选择岗位",
            allowClear: true
        });
    })
</script>
</body>
</html>